<template>
    <div class=''>
        <h2>父</h2>
        <h2>{{name }}</h2>
        <ChildDom :foo="foo" :coo="coo" @upRocket="reaciveRocket"></ChildDom>

    </div>
</template>

<script>
import ChildDom from "@/components/ChildDom.vue";
import PubSub from 'pubsub-js'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: { ChildDom },
    data() {
        //这里存放数据
        return {
            foo: "Hello, world",
            coo: "Hello,rui",
            name: '青阳子111222'

        };
    },
    provide() {//依赖注入 第一步  他不仅可以传数据还可以传方法  一定要加return否则不是响应性数据
        return {
            obj: {
                name: this.name
            },
            changeVal:this.changeName
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        reaciveRocket() {
            console.log('我接收到了孙组件发来的信息');
        },
        // demo(msgName,data){
        //     console.log('111',msgName,data);
        // }
        changeName(val) { // C中触发该方法执行，此时变成"lion"
           this.name = val
        }

    },
    beforeCreate(){
        console.log('father-beforeCreate');
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('father-created');
    },
    beforeMount(){
        console.log('father-beforeMount');
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('father-mounted');
        // 全局事件总线 第三步
        // this.$bus.$on('addmsg',(msg)=>{
        //     console.log(msg);
        // })

        //定义了一个bus.js的写法 第四步
         this.$EventBus.$on('addmsg',(msg)=>{
            console.log('msg',msg);
        })


        //第三步 订阅消息 监听
        // this.Pid = PubSub.subscribe('addDataList',this.demo)
        this.Pid = PubSub.subscribe('addDataList', (msgName, data) => {
            console.log('111', msgName, data);
        })
    },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类</style>